<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" value="不是..." class="box1" name="username" />
    <script>
      /* 
            属性节点(Attr)
                - 在DOM也是一个对象,通常不需要获取对象,而是直接通过元素即可完成对其的各种操作
                - 如何操作属性节点: 
                    方法一:
                        读取: 元素.属性名(注意,class属性需要用className来读取)
                            读取一个布尔值,会返回ture或false
                        修改: 元素.属性名 = 属性值

              方法二:
                              读取: 元素.getAttribute(属性名)
                        修改: 元素.setAttribute(属性名,属性值)
                        删除: 元素.removeAttribute(属性名)
        */
      const input = document.querySelector('[name=username]');
      console.log(input.value);
      //   input.value = 'GGGGG';

      console.log(input.getAttribute('value'));
      input.setAttribute('value', 'DDDDFSF');
      input.removeAttribute('value');
    </script>
  </body>
</html>
